<template>
  <div class="page">
    <van-form>
      <van-search shape="round" v-model="word" @input="changeQuery" @search="changeQuery" placeholder="请输入关键字"></van-search>
    </van-form>

    <div class="count" v-if="rows.length > 0">共找到{{ rows.length }}个成语</div>
    <van-empty v-else description="请输入关键字"></van-empty>
    <template v-for="item in rows">
      <div class="panel" :key="item.word">
        <van-cell-group :border="false">
          <van-cell title="词目">{{ item.word }}</van-cell>
          <van-cell title="发音">{{ item.pinyin }}</van-cell>
          <van-cell title="出处">{{ item.derivation }}</van-cell>
          <van-cell title="释义">{{ item.explanation }}</van-cell>
          <van-cell title="示例">{{ item.example }}</van-cell>
        </van-cell-group>
      </div>
    </template>
  </div>
</template>

<script>
import pinyin from "pinyin";
// let writer;
export default {
  data() {
    return {
      word: "",
      rows: [],
    };
  },
  methods: {
    async changeQuery(value) {
      if (value) {
        //判断是

        const py = pinyin(value);
        let py_merge = py.join(" ");

        py_merge = [...py_merge].map((item) => convert(item)).join("");

        console.log(py_merge);

        if (py_merge.length > 0) {
          const [first] = py_merge;
          const key = convert(first);
          const data = await this.$http(`/data/chengyu/${key}.json`);
          // const smp = firstLetter(py_merge);
          const res = data.filter((item) => item.word.includes(value));
          this.rows = res;
        }
      }

      function convert(t) {
        const em = ["aāáǎà", "oōóǒò", "eēéěè", "iīíǐì", "uūúǔùǖǘǚǜ"];
        const has = em.find((item) => item.includes(t));
        return has ? has[0] : t;
      }
      function firstLetter(str){
        return str.split(" ").map((item)=>item[0]);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.page {
  .count {
    font-size: 14px;
    color: #999;
    width: 350px;
    margin: 10px auto;
  }
}
.panel {
  border: 1px solid #eee;
  width: 350px;
  margin: 0 auto;
  //   text-align: center;
  border-radius: 5px;
  margin-bottom: 10px;
  box-shadow: 0 0 5px 0 #eee;
  overflow:hidden;

  /deep/.van-cell__value {
    flex: 3;
    color: #333;
    text-align: left;
  }
  /deep/.van-cell__title {
    color: #888;
  }
}
</style>
